<template>
  <SelectTrigger label="相机移动的方式：" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);

onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件
    timeline: false, // 时间轴控件
    animation: false, // 动画控件
    geocoder: false, // 搜索按钮
    homeButton: false, // 主页按钮
    sceneModePicker: false, // 投影方式按钮
    baseLayerPicker: false, // 图层选择按钮
    navigationHelpButton: false, // 帮助手势按钮
    fullscreenButton: false, // 全屏按钮
  });

 

  options.value = [
    {
      text: "设置相机看向某个位置（camera.setView）",
      onselect: function () {
        // 经纬高度 转笛卡尔坐标系
        const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000);
        viewer.camera.setView({
          // 位置 接受不了笛卡尔坐标系坐标
          destination: position,
          // 视角 默认是（0，-90，0） 看向地面
          orientation: {
            // heading 偏航角
            heading: Cesium.Math.toRadians(0),
            // pitch 仰俯角
            pitch: Cesium.Math.toRadians(-90),
            // roll 翻滚角
            roll: Cesium.Math.toRadians(0),
          },
        });
      },
    },
    {
      text: "基本相机飞行（camera.flyTo）",
      onselect: function () {
        // 经纬高度 转笛卡尔坐标系
        const position = Cesium.Cartesian3.fromDegrees(150, 20, 20000);
        // flyTo 移动相机
        viewer.camera.flyTo({
          // 位置
          destination: position,
          // 视角
          orientation: {
            // heading 偏航角
            heading: Cesium.Math.toRadians(0),
            // pitch 仰俯角
            pitch: Cesium.Math.toRadians(-90),
            // roll 翻滚角
            roll: Cesium.Math.toRadians(0),
          },
          // 动画时长 单位秒
          duration: 5,
        });
      },
    },
    {
      text: "设置相机固定中心（camera.lookAt）",
      onselect: function () {
        // 经纬高度 转笛卡尔坐标系
        // lookAt 将视角锁定到设置的点位上，可以选择视角，但是不能改变位置
        const position = Cesium.Cartesian3.fromDegrees(120, 70); // 经纬度的位置
        viewer.camera.lookAt(
          position,
          new Cesium.HeadingPitchRange(
            Cesium.Math.toRadians(0),
            Cesium.Math.toRadians(-90),
            20000
          )
        );
      },
    },
    {
      text: "取消（camera.lookAt）",
      onselect: function () {
        // 经纬高度 转笛卡尔坐标系
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // 取消 lookAt 锁定
      },
    },
  ];
  // 设置相机
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
